<template>
    <DialogCom :draggable="true" :title="title" :width="'500'" :visible="isVisible" @close="close" @confirm="confirm">
        <template v-slot:content>
            <div class="select-table">
                <div class="center-table">
                    <el-table :data="geometryRef" border ref="selectTable" :cell-style="cellStyle2" :header-cell-style="cellStyleSmall"
                        @current-change="currentChange" highlight-current-row :current-row-key="isGeometryId">
                        <el-table-column type="index" label="序号" width="80" :show-overflow-tooltip="true" />
                        <el-table-column prop="id" label="ID" :show-overflow-tooltip="true" />
                        <el-table-column prop="name" label="名称" :show-overflow-tooltip="true" />
                    </el-table>
                </div>
            </div>
        </template>
    </DialogCom>
</template>
<script setup>
import DialogCom from "@/components/common/DialogCom.vue";
import { defineEmits, onBeforeUnmount, onMounted, ref } from "vue";
import { cellStyleSmall, cellStyle2, } from "@/scripts/tableStyle";


const props = defineProps({
    isVisible: {
        type: Boolean,
        default: false,
    },
    close: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: "",
    },
    geometryRef: {
        type: String,
        default: "",
    },
    isGeometryId: {
        type: String,
        default: "",
    },
   
});
const emits = defineEmits(["close", "confirm"]);
const selectTable = ref(null)
const idname = ref({ id: "", name: "" })
const currentChange = (row) => {
    idname.value.id = row.id
    idname.value.name = row.name

}

// 关闭按钮
const close = () => {
    emits('close')
}
// 确认
const confirm = async () => {

    emits('confirm', idname.value)

}

onMounted(() => {
    if (props.isGeometryId) {
        setTimeout(() => {
            // 高亮当前行
            const index = props.geometryRef.findIndex(item => item.id == props.isGeometryId)
            selectTable.value?.setCurrentRow(props.geometryRef[index])
        }, 500)

    }
})

</script>

<style scoped>
.select-table {
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

</style>